<template>
    <div>
        <el-form :inline="false"
                 :model="formData"
                 label-width="100px"
                 label-position="left">
            <el-form-item label="表单类别">
                <el-select
                        v-model="formData.typeCode"
                        placeholder="请选择分类"
                >
                    <el-option
                            v-for="item in formData.formTypeList"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="表单编号">
                <el-input v-model="formData.formNo" @input="updateValue" disabled></el-input>
            </el-form-item>
            <el-form-item label="表单名称">
                <el-input v-model="formData.formName" @input="updateValue"></el-input>
            </el-form-item>
            <el-form-item label="列数">
                <el-input-number v-model="formData.columns" @change="columnChangeValue" :min="1" :max="100"></el-input-number>
            </el-form-item>
            <el-form-item label="行数">
                <el-input-number v-model="formData.rows" @change="rowChangeValue" :min="1" :max="120"></el-input-number>
            </el-form-item>

            <el-form-item label="表单描述">
                <el-input type="textarea" v-model="formData.description" @input="updateValue"></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {ElMessageBox} from "element-plus";

    export default {
        name: "FormProcessProperty",
        data() {
            return {
                formData: {columns: this.datas.columns,rows:this.datas.rows,formNo: "Form"+new Date().getTime()}
            }
        },
        props: {
            datas: {
                type: Object,
                required: true
            },
            formAction: {
                type: Object,
                required: true
            }
        },
        watch: {
            formAction(v) {
                if (this.formAction === "new") {
                    this.formData = {columns: 1,formNo: "Form"+new Date().getTime()};
                }
            }
        },
        methods: {
            columnChangeValue(newVal,oldVal){
                this.changeValue(newVal,oldVal,1);
            },
            rowChangeValue(newVal,oldVal){
                this.changeValue(newVal,oldVal,2);
            },
            changeValue(newVal, oldVal,type) {
                let _this = this;
                if (_this.formAction != "new"&&_this.formAction!="") {
                    ElMessageBox.confirm("表单已经设置了元素，现在改变列数可能导致元素丢失", "警告", {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }).then(() => {
                        _this.updateValue();
                    }).catch(() => {
                        if(type===1){
                            _this.formData.columns = oldVal;
                        }else{
                            _this.formData.rows = oldVal;
                        }

                    });
                } else {
                    _this.updateValue();
                }
            },
            updateValue() {
                this.$emit("updateFormData", this.formData);
            }
        }
    }
</script>

<style scoped>

</style>
